<template>
  <h2>组合式api</h2>
  <div>{{ cateId }}</div>
  <div>{{ obj.num }}</div>
  <div>{{ obj.info.a.b }}</div>
  <button @click="changeValue">修改id值</button>
</template>

<script setup>
import { ref, computed, watch, reactive, watchEffect } from "vue"

const arr = ref([
  { id: 1001, name: 'ipad', price: 200, num: 2 },
  { id: 1002, name: 'ipad2', price: 200, num: 3 },
  { id: 1003, name: 'ipad3', price: 20, num: 5 },
  { id: 1004, name: 'ipad4', price: 200, num: 4 },
])

//分类id
const cateId = ref(1001)
const obj = reactive({
  num: 1,
  name: '张三',
  info: {
    a: {
      b: 1
    }
  }
})

const changeValue = () => {
  cateId.value += 2;
  obj.num += 10;
  obj.info.a.b += 99
}

//监听ref
//watch(监听谁,回调函数,配置项)
watch(cateId, (newV, oldV) => {
  // console.log('newV:', newV)
  // console.log('oldV:', oldV)
})

watch(() => obj.num, (newV, oldV) => {
  // console.log('数量newV:', newV)
  // console.log('数量oldV:', oldV)
})

watch(() => obj, (newV, oldV) => {
  console.log('obj:', newV)
  console.log('obj:', oldV)
}, { deep: true })

watch([cateId, () => obj.num], (newV, oldV) => {
  console.log('监听多个值newV:', newV[0])
  console.log('监听多个值newV:', newV[1])
})

watchEffect(() => {
  console.log('watchEffect-监听到有值变化了', cateId.value)
  console.log('watchEffect-监听到有值变化了', obj.num)
})




</script>

<style scoped lang="scss"></style>
